<template>
    <div class="flex flex-row flex-nowrap gap-1">
        <el-tag v-if="!titleInline && title.length > 0" :effect="isAll ? 'dark' : 'light'" :size="size" :type="type"
            @click="clickAll" class="cursor-pointer w-16" :class="'hover:border-' + type"> {{ title }} </el-tag>
        <div class="flex flex-wrap gap-1">
            <el-tag v-if="titleInline && title.length > 0" :effect="isAll ? 'dark' : 'light'" :size="size" :type="type"
                @click="clickAll" class="cursor-pointer" :class="'hover:border-' + type"> {{ title }} </el-tag>
            <el-tag v-for="option in options" :effect="getEffect(option)" :size="size" :type="type"
                @click="clickHandler(option)" class="cursor-pointer" :class="'hover:border-' + type">
                {{ option }}
            </el-tag>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const model = defineModel({ type: Array, default: [] })
const isAll = ref(model.value.length == 0)

const props = defineProps({
    radio: { type: Boolean, default: false },
    title: { type: String, default: "" },
    titleInline: { type: Boolean, default: false },
    options: { type: Array, default: [] },
    size: { type: String, default: "small" },
    type: { type: String, default: "primary" }
})

const getEffect = (option: String | unknown): String => {
    return model.value.includes(option) ? "dark" : "light";
}

const clickAll = () => {
    model.value.length = 0;
    isAll.value = true;
}

const clickHandler = (option: String | unknown) => {
    if (option && String(option).length > 0) {
        if (props.radio) {
            model.value.length = 0;
            model.value.push(option);
        } else {
            const index = model.value.indexOf(option);
            index >= 0 ? model.value.splice(index, 1) : model.value.push(option)
        }
        isAll.value = model.value.length == 0;
    }
}
</script>
